<template>
  <div class="app-container">
    <el-row>
      <el-col :span="14" style="padding-right: 5px">
        <el-card style="height: 100%">
          <template #header><span style="font-weight: bold">待识别图片</span></template>
          <el-carousel :autoplay="false" arrow="always" indicator-position="none" @change="changeImage">
            <el-carousel-item v-for="(item,index) in imageList" :key="index">
              <el-image v-loading="image === ''" element-loading-text="加载中..." style="width: 100%; height: 100%" :src="image" fit="fill" />
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
      <el-col :span="10" style="padding-left: 5px">
        <el-card style="height: 100%">
          <template #header><span style="font-weight: bold">识别结果</span></template>
          <div v-loading="loading" element-loading-text="识别中...">
            <p v-if="!loading">
              <label style="font-size: 30px">末煤占比：</label>
              <span style="font-size: 25px">{{ emptyIsZero(recognitionData.slackProportion) +'%' }}</span>
              <!--              <span style="color: red">计算方式： 末煤/(末煤+块煤)</span>-->
              <el-divider />
              <label style="font-size: 30px">煤占比：</label>
              <span style="font-size: 25px">{{ emptyIsZero(recognitionData.coalProportion) +'%' }}</span>
              <!--              <span style="color: red">计算方式： (末煤+块煤)/总筛面</span>-->
              <el-divider />
              <label style="font-size: 30px">空筛占比：</label>
              <span style="font-size: 25px" type="danger">{{ emptyIsZero(recognitionData.sieveProportion) +'%'}}</span>
              <el-divider />
              <!--              <span style="color: red">计算方式： 空筛面/总筛面</span>-->
<!--
              <label style="font-size: 20px">分类：</label>
              <span style="font-size: 20px" type="primary">{{'末煤' + emptyIsZero(recognitionData.slack) +'% 块煤' + emptyIsZero(recognitionData.lumpCoal) +'% 空筛板' + emptyIsZero(recognitionData.sieve)+'% 其他' + emptyIsZero(recognitionData.other) +'%'}}</span>
-->

            </p>
            <el-empty v-else description="识别中..." />
          </div>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="AiShow">
import { listImages, getImage,recognitionResult } from "@/api/coal/aiShow";
const imageList = ref([]);
const image = ref("");
const loading = ref(true);
const showImage = ref(false);
const recognitionData = ref({});

onMounted(() => {
  initImages()
})

function initImages(){
  listImages().then(response =>  {
    imageList.value = response.data
    image.value = "data:image/gif;base64," + response.image
    getRecognitionResult(0);
  })
}

function changeImage(current,pre){
  image.value = ""
  getImage(current).then(response=>{
    image.value = "data:image/gif;base64," + response.msg
    getRecognitionResult(current);
  })
}

function getRecognitionResult(index){
  loading.value = true
  recognitionResult(index).then(response=>{
    recognitionData.value = response.data
    loading.value = false
  })
}

function emptyIsZero(data){
  if (data === '' || data === null || data === 'null' || data === undefined){
    return 0
  } else {
    return data
  }
}
</script>
